<template>
  <div class="app-container">
    <el-form ref="dataForm" :rules="modelRules" :model="model" label-width="150px">
      <el-form-item label="最大存储条数" prop="maxCount">
        <div v-if="!isEdit" class="static-text">{{ model.maxCount }}条</div>
        <el-input v-if="isEdit" v-model.number="model.maxCount" placeholder="最大存储条数"/>
      </el-form-item>
      <el-form-item label="最多存储天数" prop="maintainDays">
        <div v-if="!isEdit" class="static-text">{{ model.maintainDays }}天</div>
        <el-select v-if="isEdit" v-model="model.maintainDays" placeholder="请选择">
          <el-option v-for="item in maintainDaysOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="日志告警阈值" prop="alarmPercentageThreshold">
        <div v-if="!isEdit" class="static-text">{{ model.alarmPercentageThreshold }}%</div>
        <el-select v-if="isEdit" v-model="model.alarmPercentageThreshold" placeholder="请选择">
          <el-option v-for="item in alarmPercentageThresholdOptions" :key="item.value" :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button v-permission="['Admin.Log.Update']" v-if="!isEdit" type="primary" @click="isEdit= !isEdit">编辑
        </el-button>
        <el-button v-permission="['Admin.Log.Update']" v-if="isEdit" type="default" @click="cancel">取消</el-button>
        <el-button v-permission="['Admin.Log.Update']" v-if="isEdit" :loading="isSubmitLoading" type="primary"
                   @click="updateLogSetting">保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { getLogSetting, updateLogSetting } from "@/api/log";
  import { maintainDaysOptions, alarmPercentageThresholdOptions } from "@/utils/enums.js";
  import pattern from "@/utils/pattern.js";

  export default {
    data() {
      const maxCount = (rule, value, callback) => {
        if (typeof Number(value) !== 'number' || isNaN(value)) {
          callback(new Error('请输入正确的最大存储条数'));
        } else if (value < 100 || value > 500000) {
          callback(new Error('请输入正确的最大存储条数'));
        } else {
          callback();
        }
      };
      return {
        maintainDaysOptions,
        alarmPercentageThresholdOptions,
        isSubmitLoading: false,
        model: {
          maxCount: 100000,
          maintainDays: 90,
          alarmPercentageThreshold: 85
        },
        isEdit: false,
        modelRules: {
          maxCount: [
            { required: true, trigger: "blur", message: "请输入最大存储条数" },
            { validator: maxCount, trigger: "blur" },
            {
              pattern: pattern.rule02,
              trigger: "blur",
              message: "请输入正确的最大存储条数"
            }
          ]
        }
      };
    },
    computed: {},
    created() {
      this.getLogSetting();
    },
    methods: {
      getLogSetting() {
        getLogSetting().then(result => {
          this.model = result;
        });
      },
      cancel() {
        this.isEdit = false;
        this.$nextTick(() => {
          this.$refs["dataForm"].clearValidate();
        });
        this.getLogSetting();
      },
      updateLogSetting() {
        this.isSubmitLoading = true;
        this.$refs["dataForm"].validate(valid => {
          if (valid) {
            updateLogSetting(this.model)
              .then(() => {
                this.$message({
                  message: "编辑成功",
                  type: "success"
                });
                this.getLogSetting();
                this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
                this.isEdit = false;
              })
              .catch(() => {
                this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
              });
          } else {
            this.isSubmitLoading = false;
            this.$message({
              message: this.$t("formIsNotValidMessage"),
              type: "warning"
            });
          }
        });
      }
    }
  };
</script>

<style lang="scss">
  .el-cascader {
    display: block;
    max-width: 400px;
  }

  .el-input {
    max-width: 400px;
  }
</style>
